<template>
  <div class="cron">
    <tiny-form label-suffix="：" label-width="120px">
      <tiny-row>
        <tiny-col :span="6">
          <tiny-form-item label="任务组">
            <yu-select select :options="data.sysTaskGroup" v-model:value="editData.groupId" lab="groupName" val="groupId" />
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
          <tiny-form-item label="任务名称"> <el-input v-model="editData.taskName" placeholder="任务名称"></el-input></tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row>
        <tiny-col :span="6">
          <tiny-form-item label="调用类型">
            <yu-select select dictCode="rootType" v-model:value="editData.taskType" placeholder="POST/GET"></yu-select>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
          <tiny-form-item label="执行时间">
            <tiny-input v-model:value="editData.taskCron" placeholder="执行时间">
              <template #suffix>
                <yu-icon @click="changeCron" iconName="danchuang" class="cron_suffix" />
              </template>
            </tiny-input>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row>
        <tiny-col :span="12">
          <tiny-form-item label="调用地址URL">
            <tiny-input v-model="editData.taskUrl" placeholder="调用地址URL"></tiny-input>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row>
        <tiny-col :span="12">
          <tiny-form-item label="参数传递">
            <tiny-input v-model="editData.taskParam" type="textarea" rows="6" placeholder="JSON格式参数例如:{'key1':'value1','key2':'value2'}"></tiny-input>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <div class="submit-class">
        <tiny-button-group>
          <tiny-button @click="celBtn">取消</tiny-button>
          <tiny-button type="primary" @click="saveBtn">确定</tiny-button>
        </tiny-button-group>
      </div>
    </tiny-form>
    <yu-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <task-cron v-model:value="editData.taskCron" v-model:isShow="data.isShow"></task-cron>
    </yu-dialog>
  </div>
</template>

<script setup>
  import taskCron from './TaskCron.vue';
  import {reactive, ref, toRef, getCurrentInstance, onMounted} from 'vue';
  const {proxy} = getCurrentInstance();
  const data = reactive({
    sysTaskGroup: [],
    dialogConfig: {},
    isShow: false,
    taskCron: {},
  });
  const props = defineProps({
    isShow: {type: Boolean, default: false},
    editData: {type: Object, default: {}},
  });
  const emits = defineEmits(['update:isShow', 'search']);
  const celBtn = () => {
    emits('update:isShow', false);
  };
  const changeCron = () => {
    data.dialogConfig.width = '800px';
    data.dialogConfig.height = '400px';
    data.isShow = true;
  };
  const saveBtn = () => {
    proxy.$api.system.editSysTask(props.editData).then(res => {
      if (res.code != -1) {
        proxy.$message({
          type: 'success',
          message: res.msg,
        });
        // props.isShow = false;
        // emit('querySysTaskGroup');
      } else {
        // 关闭对话框
        proxy.$message({
          type: 'success',
          message: res,
        });
      }
    });
  };
  const getSysTaskGroup = async () => {
    data.sysTaskGroup = await proxy.$api.system.getSysTaskGroupDict();
  };
  onMounted(() => {
    //菜单查询
    getSysTaskGroup();
  });
</script>

<style lang="scss" scoped>
  .cron {
    padding: 10px;
    .submit-class {
      text-align: center;
      padding-top: 20px;
    }
    .cron_suffix {
      font-size: x-large;
      cursor: pointer;
    }
  }
</style>
